import React, {useState, useEffect} from 'react';
import {Link} from 'react-router-dom';
import {Menu} from 'antd';
import {FundProjectionScreenOutlined, UserOutlined, BankOutlined, CarryOutFilled, DatabaseOutlined, ProjectOutlined} from '@ant-design/icons';

import './MenuX.css';
import logo from './logo.png';
import Context from '../../context';
import useGlobal from '../../hooks/useGlobal';

function MenuX() {

  const {state} = useGlobal(Context);

  const [menuList, setMenuList] = useState([]);

  useEffect(() => {
    setMenuList([]);
    if (state.login?.auth === 0 || state.login?.auth === '0') {
      setMenuList([
        {link: '/reporter', text: '数据总览', icon: <DatabaseOutlined/>},
        {link: '/member', text: '成员管理', icon: <UserOutlined />},
        {link: '/school', text: '高校管理', icon: <BankOutlined/>},
        {link: '/checkin', text: '打卡管理', icon: <CarryOutFilled/>},
        {link: '/course', text: '课程管理', icon: <FundProjectionScreenOutlined/>},
        {link: '/subject', text: '专题精选', icon: <ProjectOutlined />},
      ]);
    }
    if (state.login?.auth === 1 || state.login?.auth === '1') {
      setMenuList([
        {link: '/member', text: '成员管理', icon: <UserOutlined/>},
      ]);
    }
  }, [state.login]);

  const [cur, setCur] = useState('/' + window.location.hash.substring(2));

  const handleClick = e => {
    setCur([e.key]);
  };

  return (
    <>
      <div style={{width: '100%', margin: '10px 0 50px 0'}}>
        <img style={{display: 'block', width: '80%', margin: 'auto'}} src={logo} alt=""/>
      </div>
      <Menu
        theme="dark"
        onClick={handleClick}
        selectedKeys={cur}
        mode="inline"
      >
        {
          menuList.map(i => {
            return (
              <Menu.Item key={i.link} icon={i.icon}>
                <Link to={i.link}>{i.text}</Link>
              </Menu.Item>
            );
          })
        }
      </Menu>
    </>
  );
}

export default MenuX;